<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, toRefs, watch,onUnmounted } from 'vue'
import { handlePoleChange } from '../service/processcontrol'
const props = defineProps({
  types: {
    //重车过磅或者空车回皮 0：重车过磅；1：空车回皮
    type: String
  },
  stable: {
    type: String
  },
  changeData: {
    type: Function
  },
  carModelData: {
    type: Object
  },
  carInOut: {
    type: String
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})
const { types, stable, changeData, carModelData, carInOut, isEdit } = toRefs(props)
const noCar = ref(true)
const isCompelte = ref(false)
const info = window._deptObj || {}
const emit = defineEmits(['changeCarInOut'])
defineExpose({
  isCompelte
})

// 道闸延迟关闭
const frontplate = ref('')
const frontanimations = () => {
  frontplate.value = 0
  setTimeout(() => {
    frontplate.value = 1
  }, 6000)
}
const endplate = ref('')
const endanimations = () => {
  endplate.value = 0
  setTimeout(() => {
    endplate.value = 1
    noCar.value = true
  }, 6000)
}
const carInBack = ref('') //车辆退场
const frontbackplate = ref('')
const frontbackanimations = () => {
  frontbackplate.value = 0
  setTimeout(() => {
    frontbackplate.value = 1
    emit('changeCarInOut', 'back')
  }, 6000)
}
watch(carInOut, (newValues, oldValues) => {
  if (newValues === 'in') {
    noCar.value = false
    carInBack.value = ''
    frontanimations()
  }
  if (newValues === 'out') {
    noCar.value = true
    endanimations()
  }
})
// 完成过磅
const completeProcess = () => {
  console.log('carModelData.value---------------',carModelData.value,Object.keys(carModelData.value))
  if (carModelData.value && Object.keys(carModelData.value).length > 0) {
    // isCompelte.value = true
    props.changeData()
    // setTimeout(() => {
    //   isCompelte.value = false
    // }, 7000)
  }
}
let clickTimer = null
let count = 0
const clickCountTimer = () => {
  clickTimer = setInterval(() => {
    count++
    if(count >= 5){
      clearInterval(clickTimer)
    }
  }, 1000)
}
const handlePole = (tag) => {
  if(carInOut.value !== 'in'){
    return
  }
  if(count > 0 && count <5){
    return ElMessage.error('点击太频繁稍后重试!')
  } else {
    count = 0
    clearInterval(clickTimer)
    let params = {
    source: 'AWM',
    command: tag === 'in' ? 'QUIT' : tag === 'out' ? 'OPEN' : '', //指令OPEN：放行,QUIT：退场
    message: tag === 'in' ? '请求退场' : tag === 'out' ? '请求放行' : '',
    DeviceID: info.WBCode
  }
  handlePoleChange(params).then((res) => {
    if (res.ResultCode === 105) {
      clickCountTimer() //5秒内不能再次点击
      if(tag === 'in'){ //车辆退场
        carInBack.value = 'back'
        frontbackanimations()
      }
      if(tag === 'out'){ //车辆放行
        emit('changeCarInOut', tag)
      }
    }
  })
  }
}
onUnmounted(() => {
  clearInterval(clickTimer)
})
</script>
<template>
  <div class="car-continer">
    <!-- 汽车过磅 -->
    <div class="car-weigh">
      <img src="../images/lane.png" class="car-lane" />
      <img src="../images/nocar.png" class="no-car" v-if="noCar" />
      <img
        src="../images/carnormal.png"
        class="normal-car"
        v-if="(types === 1 || types === 0) && stable == 1"
      />
      <img
        src="../images/carnotstop.png"
        class="stop-car"
        v-else-if="(types === 1 || types === 0) && stable == 0"
      />
      <!-- <img src="../images/caroverweight.png" class="weight-car" v-else-if="carStatus===3"> -->
      <img
        src="../images/car.png"
        class="car-img"
        :class="{ 'car-in': carInOut === 'in', 'car-out': carInOut === 'out','car-back':carInBack === 'back' }"
        v-show="carInOut === 'in' || carInOut === 'out'"
      />
    </div>
    <!-- 过磅状态 -->
    <div class="weigh-status">
      <div class="status-item" @click="handlePole('in')">
        <div class="status-img-front">
          <img src="../images/gate.png" class="gate" />
          <img
            src="../images/pole.png"
            class="pole up"
            v-if="carInOut === 'in' && (frontplate === 0 || frontbackplate === 0)"
          />
          <img
            src="../images/pole.png"
            class="pole down"
            v-else-if="carInOut === 'in' && (frontplate === 1 || frontbackplate === 1)"
          />
          <img src="../images/pole.png" class="pole" v-else />
        </div>
        <div class="status-name">上磅道闸</div>
      </div>
      <div class="status-item" @click="handlePole('out')">
        <div class="status-img-front">
          <img src="../images/gate.png" class="gate" />
          <img
            src="../images/pole.png"
            class="pole up"
            v-if="carInOut === 'out' && endplate === 0"
          />
          <img
            src="../images/pole.png"
            class="pole down"
            v-else-if="carInOut === 'out' && endplate === 1"
          />
          <img src="../images/pole.png" class="pole" v-else />
        </div>
        <div class="status-name">下磅道闸</div>
      </div>
      <div class="status-item" @click="completeProcess">
        <div class="status-img-complete">
          <img src="../images/complete.png" v-if="isCompelte" />
          <img src="../images/incomplete.png" v-else />
        </div>
        <div class="status-name">完成过磅</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.car-continer {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  .car-weigh {
    width: 390px;
    height: calc(100% - 135px);
    background-color: #2c324d;
    position: relative;
    overflow: hidden;
    .photo {
      width: 90%;
      height: calc(100% - 80px);
      position: absolute;
    }
    .car-lane {
      z-index: 1;
      width: 92%;
      margin-left: 4%;
      height: 80%;
      margin-top: 20%;
    }
    .no-car,
    .normal-car,
    .stop-car,
    .weight-car {
      z-index: 2;
      width: 60%;
      height: 75%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-49%, -48%);
    }
    .stop-car,
    .weight-car {
      animation: twinkle 1s;
      animation-iteration-count: infinite;
      @keyframes twinkle {
        from {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
        to {
          opacity: 1;
        }
      }
    }

    .car-img {
      width: 200px;
      height: auto;
      z-index: 3;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -45%);
    }
    .car-in {
      -webkit-animation: move 20s 1;
      animation: carmove 20s 1;
      animation-fill-mode: forwards;
      @-webkit-keyframes carmove {
        0% {
          top: 30%;
        }
        100% {
          top: 50%;
        }
      }
      @keyframes carmove {
        0% {
          top: 30%;
        }
        100% {
          top: 50%;
        }
      }
    }
    .car-back{
      -webkit-animation: move 20s 1;
      animation: carback 20s 1;
      animation-fill-mode: forwards;
      @-webkit-keyframes carback {
        0% {
          top: 50%;
          opacity: 1;
        }
        100% {
          top: 10%;
          opacity: 0;
        }
      }
      @keyframes carback {
        0% {
          top: 50%;
          opacity: 1;
        }
        100% {
          top: 10%;
          opacity: 0;
        }
      }
    }
    .car-out {
      -webkit-animation: move 20s 1;
      animation: outmove 20s 1;
      animation-fill-mode: forwards;
      @-webkit-keyframes outmove {
        0% {
          top: 50%;
          opacity: 1;
        }
        100% {
          top: 100%;
          opacity: 0;
        }
      }
      @keyframes outmove {
        0% {
          top: 50%;
          opacity: 1;
        }
        50% {
          opacity: 1;
        }
        80% {
          opacity: 1;
        }
        100% {
          top: 100%;
          opacity: 0;
        }
      }
    }
  }
  .weigh-status {
    margin-top: 10px;
    width: 390px;
    justify-content: space-between;
    display: flex;
    .status-item {
      width: 123px;
      height: 125px;
      background-color: #2c324d;
      .status-img-front {
        width: 100%;
        height: 79%;
        text-align: center;
        margin: 0 auto;
        position: relative;
        .gate {
          width: 88px;
          height: auto;
          position: absolute;
          top: 24%;
          left: 14%;
        }
        .pole {
          width: 88px;
          position: absolute;
          top: 24%;
          left: 19%;
          transform: translate(0%, 0%) rotate(0deg) scale(1);
        }
        .up {
          transform: translate(0%, 0%) rotate(0deg) scale(1);
          animation: move 3s linear 1;
          animation-fill-mode: forwards;
          @keyframes move {
            0% {
              transform: translate(0%, 0%) rotate(0deg) scale(1);
            }
            100% {
              transform: translate(-2%, -36%) rotate(-45deg) scale(0.7);
            }
          }
        }
        .down {
          transform: translate(-2%, -36%) rotate(-45deg) scale(0.7);
          animation: rotate 3s linear 1;
          animation-fill-mode: forwards;
          @keyframes rotate {
            0% {
              transform: translate(-2%, -36%) rotate(-45deg) scale(0.7);
            }
            100% {
              transform: translate(0%, 0%) rotate(0deg) scale(1);
            }
          }
        }
      }
      .status-img-complete {
        width: 100%;
        height: 79%;
        text-align: center;
        margin: 0 auto;
        position: relative;
        img {
          width: 88px;
          height: auto;
          margin-top: 19px;
          position: absolute;
          top: 3%;
          left: 19%;
        }
      }
      .status-name {
        color: #626887;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
      }
    }
  }
}
</style>
